<script setup>
import warehouse from '@/views/warehouse/warehouse/index.vue'
import warehouseArea from '@/views/warehouse/warehouseArea/index.vue'
import warehouseAreaLocal from '@/views/warehouse/warehouseAreaLocal/index.vue'
import { ref } from 'vue'


const activeName = ref('first')
const warehouseRef = ref(null)
const warehouseAreaRef = ref(null)
const warehouseAreaLocalRef = ref(null)
const handleClick = (tab, event) => {
  console.log(tab, event)
}
const handleTabChange = (name) => {
  // 根据切换的标签页执行对应组件的刷新方法
  switch (name) {
    case 'first':
      warehouseRef.value?.refreshData?.()
      warehouseRef.value?.childMethods?.getAreaList?.()
      break
    case 'second':
      warehouseAreaRef.value?.refreshData?.()
      warehouseAreaRef.value?.childMethods?.getWarehouse?.()
      break
    case 'third':
      warehouseAreaLocalRef.value?.refreshData?.()
      warehouseAreaLocalRef.value?.childMethods?.getWarehouseList?.()
      warehouseAreaLocalRef.value?.childMethods?.getWarehouseAreaList?.()
      break
  }
}

</script>
<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" @tab-change="handleTabChange">
    <el-tab-pane label="仓库设置" name="first">
      <warehouse ref="warehouseRef" />
    </el-tab-pane>
    <el-tab-pane label="库区设置" name="second"><warehouse-area ref="warehouseAreaRef" /></el-tab-pane>
    <el-tab-pane label="库位设置" name="third"><warehouse-area-local ref="warehouseAreaLocalRef" /></el-tab-pane>
  </el-tabs>
</template>


<style>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>